<template>
    <div class="app-container">
        <!-- 添加按钮 -->
        <div v-if="hasPermission('AdminProjectGuaranteeProvider.insertProjectGuarantee')" class="addDiv">
            <el-button type="primary"  @click="addAlert">添加</el-button>
        </div>
        <!-- 添加弹出窗 -->
        <el-dialog
            title="新增保障项目"
            :visible.sync="dialogVisible"
            :before-close="addHandleClose"
            width="30%">
            <!-- 输入框 -->
            <el-form :inline="true"
            label-width="80px"
            label-position="right">
                <el-form-item label="保障项目">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addHandleClose()">取 消</el-button>
                <el-button type="primary" @click="addSubmit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 列表展示 -->
        <el-table
            v-loading="tableLoading"
            :data="tableData"
            class="tableData"
            style="width: 100%">
            <el-table-column
            prop="id"
            label="序号"
            >
            </el-table-column>
            <el-table-column
            prop="name"
            label="保障名称">
            </el-table-column>
            <el-table-column
            prop="createdAt"
            label="添加时间">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button v-if="hasPermission('AdminProjectGuaranteeProvider.updateProjectGuarantee')" type="text" @click="editAlert(scope.row.id)" size="small">编辑</el-button>
                <el-button v-if="hasPermission('AdminProjectGuaranteeProvider.delProjectGuarantee')" type="text" @click="deleteFn(scope.row.id)" size="small">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <!-- 编辑弹出窗 -->
        <el-dialog
            title="编辑保障项目"
            :visible.sync="editDialog"
            :before-close="editHandleClose"
            width="30%">
            <!-- 输入框 -->
            <el-form :inline="true"
            label-width="80px"
            label-position="right">
                <el-form-item label="保障项目">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editHandleClose()">取 消</el-button>
                <el-button type="primary" @click="editSubmit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分页 -->
        <div class="pagesCon">
            <div>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="listForm.pageNum"
                :page-sizes="page_sizes"
                :page-size="listForm.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page_totals">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import {findProjectGuaranteeList,delProjectGuarantee,insertProjectGuarantee,getProjectGuaranteeById,updateProjectGuarantee} from '@/api/itemSecurity'
export default {
    name:"itemSecurity",
    data(){
        return {
            dialogVisible: false,//添加弹出窗显影
            editDialog:false,
            tableData: [],//table列表数据
            page_sizes:[10,30,50,100],
            page_totals:60,
            listForm:{
                pageNum:1,
                pageSize:10,
            },
            form:{
                name:""
            },
            id:"",
        }
    },
    created(){
        this.getList()
    },
    methods:{
        //按钮权限
        hasPermission(e){
            return window.helper.hasPermission(e)
        },
        //医院等级列表
        getList(){
            this.tableLoading = true
            findProjectGuaranteeList(this.listForm).then(res=>{
                // console.log(res)
                this.tableLoading = false
                this.page_totals = res.data.data.count
                this.tableData = res.data.data.list
            })
        },
        //关闭添加弹窗
        addHandleClose(){
            this.dialogVisible = false
        },
        //添加弹窗
        addAlert(){
            this.dialogVisible = true
            this.form.name = ""
        },
        // 等级添加
        addSubmit(){
            this.dialogVisible = false
            let datas = {
                isShow:"1",
                name:this.form.name
            }
            if(this.form.name){
                insertProjectGuarantee(datas).then(res => {
                    // console.log(res)
                    this.succStatus("添加")
                    this.getList()
                })
            }else{
                this.errorStatus("添加")
            }
        },
        //关闭修改弹窗
        editHandleClose(){
            this.editDialog = false
        },
        //修改弹窗
        editAlert(e){
            this.editDialog = true
            this.id = e
            let datas = {
                id:e
            }
            getProjectGuaranteeById(datas).then(res=>{
                // console.log(res)
                this.form.name = res.data.data.name
            })
        },
        // 等级修改
        editSubmit(){
            this.editDialog = false
            let datas = {
                isShow:"1",
                name:this.form.name,
                id:this.id
            }
            console.log(datas)
            if(this.form.name){
                updateProjectGuarantee(datas).then(res => {
                    console.log(res)
                    this.succStatus("修改")
                    this.getList()
                })
            }else{
                this.errorStatus("修改")
            }
        },
        //成功状态弹窗
        succStatus(txt){
            this.$message({
                message: txt+'成功',
                type: 'success'
            });
        },
        //失败状态弹窗
        errorStatus(txt){
            this.$message.error(txt+'失败');
        },
        //改变页面条数
        handleSizeChange(val) {
            this.listForm.pageSize = val
            this.getList()
        },
        //选择页数
        handleCurrentChange(val) {
            this.listForm.pageNum = val
            this.getList()
        },
        //删除
        deleteFn(e){
            let datas = {
                id:e
            }
            this.$confirm('删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delProjectGuarantee(datas).then(res =>{
                    console.log(res)
                    if(!res.data.code){
                        this.succStatus("删除")
                        this.getList()
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
                .catch(error =>{
                    this.$message.error(error);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                }); 
            });
        },
    }
}
</script>

<style scoped>
.addDiv{height:60px;}
/* .tableData{height: calc(100vh - 310px);} */
.pagesCon{height: 40px;margin-top: 20px}
.pagesCon>div{float: right;}
</style>